<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 场景标签对比展示</title>
    <link rel="stylesheet" href="style.css">
    <script type="importmap">
    {
        "imports": {
            "three": "../three.js/build/three.module.js",
            "three/addons/": "../three.js/examples/jsm/"
        }
    }
    </script>
</head>
<body>
    <!-- 左侧面板 -->
    <div id="left-panel">
        <div id="header">
            <h1>Three.js 场景标签对比展示</h1>
            <p>深入对比CSS2DRenderer、CSS3DRenderer、CSS3DSprite和Sprite四种标签</p>
        </div>
        
        <div id="controls">
            <div class="control-group">
                <label for="rendererType">渲染器类型:</label>
                <select id="rendererType">
                    <option value="comparison">四种渲染器对比</option>
                    <option value="css2d">CSS2DRenderer</option>
                    <option value="css3d">CSS3DRenderer</option>
                    <option value="css3dsprite">CSS3DSprite</option>
                    <option value="sprite">Sprite</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>参考几何体:</label>
                <select id="geometryType">
                    <option value="box">立方体</option>
                    <option value="sphere">球体</option>
                    <option value="plane">平面</option>
                    <option value="torus">圆环</option>
                </select>
            </div>
            
            <div class="control-group">
                <label>动画效果:</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" id="enableRotation" checked> 旋转动画</label>
                    <label><input type="checkbox" id="enableFloat" checked> 浮动效果</label>
                </div>
            </div>
        </div>
        
        <div id="renderer-info">
            <h3 id="renderer-title">渲染器对比</h3>
            <div id="renderer-description">
                <div class="renderer-section css2d-module" id="css2d-section">
                    <div class="module-header">
                        <div class="module-icon css2d-icon">🏷️</div>
                        <h4>CSS2DRenderer</h4>
                        <div class="module-badge css2d-badge">2D标签</div>
                    </div>
                    <p><strong>描述:</strong> 用于在3D场景中渲染2D HTML元素，元素始终面向相机，适合创建标签和UI界面。</p>
                    <p><strong>主要特点:</strong></p>
                    <ul class="feature-list">
                        <li><strong>2D界面集成:</strong> 将HTML/CSS元素无缝集成到3D场景中</li>
                        <li><strong>始终面向相机:</strong> 元素自动朝向相机，保持最佳可读性</li>
                        <li><strong>精确定位:</strong> 可精确定位到3D空间中的任意点</li>
                        <li><strong>高性能:</strong> 基于DOM渲染，性能优异</li>
                        <li><strong>易于使用:</strong> 简单的API，易于集成现有HTML内容</li>
                    </ul>
                    <div class="code-example">
                        <h5>代码示例</h5>
                        <pre><code><span class="comment">// 创建CSS2D渲染器</span>
<span class="keyword">const</span> <span class="variable">css2dRenderer</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">CSS2DRenderer</span>();
<span class="variable">css2dRenderer</span>.<span class="function">setSize</span>(<span class="variable">window</span>.<span class="variable">innerWidth</span>, <span class="variable">window</span>.<span class="variable">innerHeight</span>);
<span class="variable">css2dRenderer</span>.<span class="variable">domElement</span>.<span class="variable">style</span>.<span class="variable">position</span> <span class="operator">=</span> <span class="string">'absolute'</span>;
<span class="variable">css2dRenderer</span>.<span class="variable">domElement</span>.<span class="variable">style</span>.<span class="variable">top</span> <span class="operator">=</span> <span class="string">'0px'</span>;
<span class="variable">document</span>.<span class="variable">body</span>.<span class="function">appendChild</span>(<span class="variable">css2dRenderer</span>.<span class="variable">domElement</span>);

<span class="comment">// 创建CSS2D对象</span>
<span class="keyword">const</span> <span class="variable">div</span> <span class="operator">=</span> <span class="variable">document</span>.<span class="function">createElement</span>(<span class="string">'div'</span>);
<span class="variable">div</span>.<span class="variable">className</span> <span class="operator">=</span> <span class="string">'label'</span>;
<span class="variable">div</span>.<span class="variable">textContent</span> <span class="operator">=</span> <span class="string">'CSS2D标签'</span>;
<span class="keyword">const</span> <span class="variable">css2dObject</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">CSS2DObject</span>(<span class="variable">div</span>);
<span class="variable">css2dObject</span>.<span class="variable">position</span>.<span class="function">set</span>(<span class="number">0</span>, <span class="number">1</span>, <span class="number">0</span>);
<span class="variable">scene</span>.<span class="function">add</span>(<span class="variable">css2dObject</span>);</code></pre>
                    </div>
                </div>
                
                <div class="renderer-section css3d-module" id="css3d-section">
                    <div class="module-header">
                        <div class="module-icon css3d-icon">🎭</div>
                        <h4>CSS3DRenderer</h4>
                        <div class="module-badge css3d-badge">3D界面</div>
                    </div>
                    <p><strong>描述:</strong> 在3D空间中渲染HTML元素，支持完整的3D变换，可创建复杂的3D界面效果。</p>
                    <p><strong>主要特点:</strong></p>
                    <ul class="feature-list">
                        <li><strong>完整3D变换:</strong> 支持旋转、缩放、位移等所有3D变换</li>
                        <li><strong>透视投影:</strong> 真实的3D透视效果</li>
                        <li><strong>复杂布局:</strong> 可创建3D网页布局和界面</li>
                        <li><strong>WebGL融合:</strong> 与WebGL渲染器完美结合</li>
                        <li><strong>精确控制:</strong> 完全控制元素的3D位置和方向</li>
                    </ul>
                    <div class="code-example">
                        <h5>代码示例</h5>
                        <pre><code><span class="comment">// 创建CSS3D渲染器</span>
<span class="keyword">const</span> <span class="variable">css3dRenderer</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">CSS3DRenderer</span>();
<span class="variable">css3dRenderer</span>.<span class="function">setSize</span>(<span class="variable">window</span>.<span class="variable">innerWidth</span>, <span class="variable">window</span>.<span class="variable">innerHeight</span>);
<span class="variable">css3dRenderer</span>.<span class="variable">domElement</span>.<span class="variable">style</span>.<span class="variable">position</span> <span class="operator">=</span> <span class="string">'absolute'</span>;
<span class="variable">css3dRenderer</span>.<span class="variable">domElement</span>.<span class="variable">style</span>.<span class="variable">top</span> <span class="operator">=</span> <span class="string">'0px'</span>;
<span class="variable">document</span>.<span class="variable">body</span>.<span class="function">appendChild</span>(<span class="variable">css3dRenderer</span>.<span class="variable">domElement</span>);

<span class="comment">// 创建CSS3D对象</span>
<span class="keyword">const</span> <span class="variable">element</span> <span class="operator">=</span> <span class="variable">document</span>.<span class="function">createElement</span>(<span class="string">'div'</span>);
<span class="variable">element</span>.<span class="variable">className</span> <span class="operator">=</span> <span class="string">'element'</span>;
<span class="variable">element</span>.<span class="variable">innerHTML</span> <span class="operator">=</span> <span class="string">'&lt;h2&gt;CSS3D元素&lt;/h2&gt;'</span>;
<span class="keyword">const</span> <span class="variable">css3dObject</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">CSS3DObject</span>(<span class="variable">element</span>);
<span class="variable">css3dObject</span>.<span class="variable">position</span>.<span class="function">set</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);
<span class="variable">css3dObject</span>.<span class="variable">rotation</span>.<span class="variable">y</span> <span class="operator">=</span> <span class="variable">Math</span>.<span class="variable">PI</span> <span class="operator">/</span> <span class="number">4</span>;
<span class="variable">scene</span>.<span class="function">add</span>(<span class="variable">css3dObject</span>);</code></pre>
                    </div>
                </div>
                
                <div class="renderer-section css3dsprite-module" id="css3dsprite-section">
                    <div class="module-header">
                        <div class="module-icon css3dsprite-icon">🎪</div>
                        <h4>CSS3DSprite</h4>
                        <div class="module-badge css3dsprite-badge">3D精灵</div>
                    </div>
                    <p><strong>描述:</strong> CSS3D的特殊形式，元素在3D空间中定位但始终面向相机，结合了CSS3D和CSS2D的优点。</p>
                    <p><strong>主要特点:</strong></p>
                    <ul class="feature-list">
                        <li><strong>自动朝向:</strong> 在3D空间定位但自动面向相机</li>
                        <li><strong>深度感知:</strong> 具有真实的深度和遮挡关系</li>
                        <li><strong>CSS样式:</strong> 支持完整的CSS样式和动画</li>
                        <li><strong>性能平衡:</strong> 在性能和效果之间取得平衡</li>
                        <li><strong>动态缩放:</strong> 根据距离自动调整大小</li>
                    </ul>
                    <div class="code-example">
                        <h5>代码示例</h5>
                        <pre><code><span class="comment">// 创建CSS3DSprite对象</span>
<span class="keyword">const</span> <span class="variable">spriteDiv</span> <span class="operator">=</span> <span class="variable">document</span>.<span class="function">createElement</span>(<span class="string">'div'</span>);
<span class="variable">spriteDiv</span>.<span class="variable">className</span> <span class="operator">=</span> <span class="string">'sprite-label'</span>;
<span class="variable">spriteDiv</span>.<span class="variable">innerHTML</span> <span class="operator">=</span> <span class="string">'CSS3D Sprite'</span>;
<span class="keyword">const</span> <span class="variable">css3dSprite</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="function">CSS3DSprite</span>(<span class="variable">spriteDiv</span>);
<span class="variable">css3dSprite</span>.<span class="variable">position</span>.<span class="function">set</span>(<span class="number">2</span>, <span class="number">1</span>, <span class="number">0</span>);
<span class="variable">css3dSprite</span>.<span class="variable">scale</span>.<span class="function">set</span>(<span class="number">0.01</span>, <span class="number">0.01</span>, <span class="number">0.01</span>);
<span class="variable">scene</span>.<span class="function">add</span>(<span class="variable">css3dSprite</span>);</code></pre>
                    </div>
                </div>
                
                <div class="renderer-section sprite-module" id="sprite-section">
                    <div class="module-header">
                        <div class="module-icon sprite-icon">✨</div>
                        <h4>Sprite</h4>
                        <div class="module-badge sprite-badge">高性能</div>
                    </div>
                    <p><strong>描述:</strong> WebGL原生的精灵对象，使用纹理渲染，性能最优，适合大量标签和粒子效果。</p>
                    <p><strong>主要特点:</strong></p>
                    <ul class="feature-list">
                        <li><strong>极高性能:</strong> GPU渲染，支持大量实例</li>
                        <li><strong>纹理渲染:</strong> 使用图片或Canvas作为纹理</li>
                        <li><strong>自动朝向:</strong> 始终面向相机</li>
                        <li><strong>材质系统:</strong> 支持Three.js完整的材质系统</li>
                        <li><strong>批量渲染:</strong> 可高效渲染大量精灵</li>
                    </ul>
                    <div class="code-example">
                        <h5>代码示例</h5>
                        <pre><code><span class="comment">// 创建Canvas纹理</span>
<span class="keyword">const</span> <span class="variable">canvas</span> <span class="operator">=</span> <span class="variable">document</span>.<span class="function">createElement</span>(<span class="string">'canvas'</span>);
<span class="keyword">const</span> <span class="variable">context</span> <span class="operator">=</span> <span class="variable">canvas</span>.<span class="function">getContext</span>(<span class="string">'2d'</span>);
<span class="variable">canvas</span>.<span class="variable">width</span> <span class="operator">=</span> <span class="number">256</span>;
<span class="variable">canvas</span>.<span class="variable">height</span> <span class="operator">=</span> <span class="number">128</span>;
<span class="variable">context</span>.<span class="variable">fillStyle</span> <span class="operator">=</span> <span class="string">'#ff6b6b'</span>;
<span class="variable">context</span>.<span class="function">fillRect</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="variable">canvas</span>.<span class="variable">width</span>, <span class="variable">canvas</span>.<span class="variable">height</span>);
<span class="variable">context</span>.<span class="variable">fillStyle</span> <span class="operator">=</span> <span class="string">'white'</span>;
<span class="variable">context</span>.<span class="variable">font</span> <span class="operator">=</span> <span class="string">'24px Arial'</span>;
<span class="variable">context</span>.<span class="function">fillText</span>(<span class="string">'Sprite标签'</span>, <span class="number">10</span>, <span class="number">50</span>);

<span class="comment">// 创建Sprite</span>
<span class="keyword">const</span> <span class="variable">texture</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="variable">THREE</span>.<span class="function">CanvasTexture</span>(<span class="variable">canvas</span>);
<span class="keyword">const</span> <span class="variable">spriteMaterial</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="variable">THREE</span>.<span class="function">SpriteMaterial</span>({ <span class="variable">map</span>: <span class="variable">texture</span> });
<span class="keyword">const</span> <span class="variable">sprite</span> <span class="operator">=</span> <span class="keyword">new</span> <span class="variable">THREE</span>.<span class="function">Sprite</span>(<span class="variable">spriteMaterial</span>);
<span class="variable">sprite</span>.<span class="variable">position</span>.<span class="function">set</span>(<span class="number">0</span>, <span class="number">2</span>, <span class="number">0</span>);
<span class="variable">sprite</span>.<span class="variable">scale</span>.<span class="function">set</span>(<span class="number">2</span>, <span class="number">1</span>, <span class="number">1</span>);
<span class="variable">scene</span>.<span class="function">add</span>(<span class="variable">sprite</span>);</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 右侧面板 -->
    <div id="right-panel">
        <div id="technical-comparison">
            <h4>技术对比表:</h4>
            <div class="comparison-table">
                <table>
                    <thead>
                        <tr>
                            <th>特性</th>
                            <th>CSS2DRenderer</th>
                            <th>CSS3DRenderer</th>
                            <th>CSS3DSprite</th>
                            <th>Sprite</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>渲染方式</td>
                            <td>DOM</td>
                            <td>DOM + CSS3D</td>
                            <td>DOM + CSS3D</td>
                            <td>WebGL</td>
                        </tr>
                        <tr>
                            <td>性能</td>
                            <td>中等</td>
                            <td>中等</td>
                            <td>中等</td>
                            <td>最高</td>
                        </tr>
                        <tr>
                            <td>3D变换</td>
                            <td>❌</td>
                            <td>✅</td>
                            <td>部分</td>
                            <td>❌</td>
                        </tr>
                        <tr>
                            <td>面向相机</td>
                            <td>✅</td>
                            <td>❌</td>
                            <td>✅</td>
                            <td>✅</td>
                        </tr>
                        <tr>
                            <td>HTML/CSS支持</td>
                            <td>完整</td>
                            <td>完整</td>
                            <td>完整</td>
                            <td>❌</td>
                        </tr>
                        <tr>
                            <td>交互性</td>
                            <td>完整</td>
                            <td>完整</td>
                            <td>完整</td>
                            <td>有限</td>
                        </tr>
                        <tr>
                            <td>批量渲染</td>
                            <td>有限</td>
                            <td>有限</td>
                            <td>有限</td>
                            <td>优秀</td>
                        </tr>
                        <tr>
                            <td>适用场景</td>
                            <td>UI标签</td>
                            <td>3D界面</td>
                            <td>3D标签</td>
                            <td>粒子/大量标签</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div id="usage-guide">
            <h4>使用指南:</h4>
            <div class="guide-content">
                <div class="guide-item">
                    <h5>🎯 选择CSS2DRenderer当:</h5>
                    <ul>
                        <li>需要创建简单的标签和提示</li>
                        <li>要求元素始终面向用户</li>
                        <li>需要完整的HTML/CSS功能</li>
                        <li>交互性要求较高</li>
                    </ul>
                </div>
                
                <div class="guide-item">
                    <h5>🎭 选择CSS3DRenderer当:</h5>
                    <ul>
                        <li>需要创建3D网页布局</li>
                        <li>要求完整的3D变换</li>
                        <li>构建复杂的3D界面</li>
                        <li>需要透视投影效果</li>
                    </ul>
                </div>
                
                <div class="guide-item">
                    <h5>🎪 选择CSS3DSprite当:</h5>
                    <ul>
                        <li>需要3D空间中的2D标签</li>
                        <li>要求深度感知和遮挡</li>
                        <li>平衡性能和功能</li>
                        <li>需要动态缩放效果</li>
                    </ul>
                </div>
                
                <div class="guide-item">
                    <h5>✨ 选择Sprite当:</h5>
                    <ul>
                        <li>需要极高的渲染性能</li>
                        <li>大量标签或粒子效果</li>
                        <li>移动设备优化</li>
                        <li>简单的纹理显示</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 3D场景容器 -->
    <canvas id="canvas"></canvas>
    
    <script type="module" src="main.js"></script>
</body>
</html>